<!-- Custom Theme Style -->
<link href="/css/alipay.css" rel="stylesheet" />

<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <header class="am-header">
            <h1>阿里扫码支付-沙箱示例</h1>
        </header>
        <div id="main">
            <div id="tabhead" class="tab-head">
                <h2 id="tab1" class="selected" name="tab" @click="changeTab($event)">付 款</h2>
                <h2 id="tab2" name="tab" @click="changeTab($event)">交 易 查 询</h2>
                <h2 id="tab3" name="tab" @click="changeTab($event)">退 款</h2>
                <h2 id="tab4" name="tab" @click="changeTab($event)">退 款 查 询</h2>
                <h2 id="tab5" name="tab" @click="changeTab($event)">交 易 关 闭</h2>
            </div>
            <form action="/api/alipay/tradePayPage" method="post" target="_blank">
                <div id="body1" class="show" name="divcontent">
                    <dl class="content">
                        <dt>商户订单号 ：</dt>
                        <dd>
                            <input name="outTradeNo" type="text" v-model="alipay.outTradeNo" />
                        </dd>
                        <hr class="one_line">
                        <dt>订单名称 ：</dt>
                        <dd>
                            <input name="subject" type="text" v-model="alipay.subject" />
                        </dd>
                        <hr class="one_line">
                        <dt>付款金额 ：</dt>
                        <dd>
                            <input name="totalAmount" type="text" v-model="alipay.totalAmount" />
                        </dd>
                        <hr class="one_line">
                        <dt>商品描述：</dt>
                        <dd>
                            <input name="body" type="text" v-model="alipay.body" />
                        </dd>
                        <hr class="one_line">
                        <dt></dt>
                        <dd id="btn-dd">
                            <span class="new-btn-login-sp">
                                <button class="new-btn-login" type="submit" style="text-align: center;">付 款</button>
                            </span>
                            <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
                        </dd>
                    </dl>
                </div>
            </form>
            <form name=tradequery action=alipay.trade.query.jsp method=post target="_blank">
                <div id="body2" class="tab-content" name="divcontent">
                    <dl class="content">
                        <dt>商户订单号 ：</dt>
                        <dd>
                            <input id="WIDTQout_trade_no" name="WIDTQout_trade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt>支付宝交易号 ：</dt>
                        <dd>
                            <input id="WIDTQtrade_no" name="WIDTQtrade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt></dt>
                        <dd id="btn-dd">
                            <span class="new-btn-login-sp">
                                <button class="new-btn-login" type="submit"
                                        style="text-align: center;">交 易 查 询</button>
                            </span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易查询”按钮，即表示您同意该次的执行操作。</span>
                        </dd>
                    </dl>
                </div>
            </form>
            <form name=traderefund action=alipay.trade.refund.jsp method=post
                  target="_blank">
                <div id="body3" class="tab-content" name="divcontent">
                    <dl class="content">
                        <dt>商户订单号 ：</dt>
                        <dd>
                            <input id="WIDTRout_trade_no" name="WIDTRout_trade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt>支付宝交易号 ：</dt>
                        <dd>
                            <input id="WIDTRtrade_no" name="WIDTRtrade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt>退款金额 ：</dt>
                        <dd>
                            <input id="WIDTRrefund_amount" name="WIDTRrefund_amount" />
                        </dd>
                        <hr class="one_line">
                        <dt>退款原因 ：</dt>
                        <dd>
                            <input id="WIDTRrefund_reason" name="WIDTRrefund_reason" />
                        </dd>
                        <hr class="one_line">
                        <dt>退款请求号 ：</dt>
                        <dd>
                            <input id="WIDTRout_request_no" name="WIDTRout_request_no" />
                        </dd>
                        <hr class="one_line">
                        <dt></dt>
                        <dd id="btn-dd">
                            <span class="new-btn-login-sp">
                                <button class="new-btn-login" type="submit"
                                        style="text-align: center;">退 款</button>
                            </span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款”按钮，即表示您同意该次的执行操作。</span>
                        </dd>
                    </dl>
                </div>
            </form>
            <form name=traderefundquery
                  action=alipay.trade.fastpay.refund.query.jsp method=post
                  target="_blank">
                <div id="body4" class="tab-content" name="divcontent">
                    <dl class="content">
                        <dt>商户订单号 ：</dt>
                        <dd>
                            <input id="WIDRQout_trade_no" name="WIDRQout_trade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt>支付宝交易号 ：</dt>
                        <dd>
                            <input id="WIDRQtrade_no" name="WIDRQtrade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt>退款请求号 ：</dt>
                        <dd>
                            <input id="WIDRQout_request_no" name="WIDRQout_request_no" />
                        </dd>
                        <hr class="one_line">
                        <dt></dt>
                        <dd id="btn-dd">
                            <span class="new-btn-login-sp">
                                <button class="new-btn-login" type="submit"
                                        style="text-align: center;">退 款 查 询</button>
                            </span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款查询”按钮，即表示您同意该次的执行操作。</span>
                        </dd>
                    </dl>
                </div>
            </form>
            <form name=tradeclose action=alipay.trade.close.jsp method=post
                  target="_blank">
                <div id="body5" class="tab-content" name="divcontent">
                    <dl class="content">
                        <dt>商户订单号 ：</dt>
                        <dd>
                            <input id="WIDTCout_trade_no" name="WIDTCout_trade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt>支付宝交易号 ：</dt>
                        <dd>
                            <input id="WIDTCtrade_no" name="WIDTCtrade_no" />
                        </dd>
                        <hr class="one_line">
                        <dt></dt>
                        <dd id="btn-dd">
                            <span class="new-btn-login-sp">
                                <button class="new-btn-login" type="submit"
                                        style="text-align: center;">交 易 关 闭</button>
                            </span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易关闭”按钮，即表示您同意该次的执行操作。</span>
                        </dd>
                    </dl>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /page content -->

<script type="text/javascript">
    var alipay = new Vue({
        el: "#main",
        data: {
            alipay: {
                outTradeNo: "Order_" + (new Date()).getTime(),
                totalAmount: (Math.random()*(10 - 1) + 1).toFixed(2),
                subject: "川A44444 停车缴费",
                body: "停车无忧",
            },
        },
        methods: {
            changeTab: function (event) {
                var tabs = $("[name=tab]");
                var contents = $("[name=divcontent]");
                for (var i = 0, len = tabs.length; i < len; i++) {
                    if(tabs[i] === event.currentTarget) {
                        tabs[i].className = 'selected';
                        contents[i].className = 'show';
                    } else {
                        tabs[i].className = '';
                        contents[i].className = 'tab-content';
                    }
                }
            }
        },
    });
</script>